<style>
  .tenways-with-text .comming-soon {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #fff;
  }
  
  @media screen and (max-width: 900px) {
    .tenways-with-text .comming-soon {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
    }
  }
  @media screen and (min-width: 700px) and (max-height: 700px) {
    .tenways-with-text .comming-soon {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
    }
  }
</style>
<div class="tenways-with-text">
   <div class="text-content">
    <div class="text_list">
       <div class="page-width">
        {% if section.settings.html !=blank %}
          <div class="html">{{ section.settings.html }}</div>
        {% endif %}
        {% if section.settings.text !=blank %}
          <div class="text text-1">{{ section.settings.text }}</div>
        {% endif %}
        {% if section.settings.text2 != blank and section.settings.product != blank %}
          <div class="comming-soon">{{ section.settings.text2 }}<span> {{ section.settings.product.price | money  }}</span></div>
        {% endif %}
       </div>
     </div>
      <div class="text-top">
        <div class="pc_banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
            >
            {%- if section.settings.image != blank -%}
            <img
                srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                {%- if section.settings.image.width >= 1400 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                data-src="{{ section.settings.image | img_url: '1500x' }}"
                alt="{{ section.settings.image.alt | escape }}"
                loading="lazy"
                class="lazyload"
                width="{{ section.settings.image.width }}"
                height="{{ section.settings.image.height }}"
            >
            {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
        </div>
        <div class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if section.settings.height == 'adapt' and section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
            >
            {%- if section.settings.image_mobile != blank -%}
            <img
            srcset="{%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 412 -%}{{ section.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1100 -%}{{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1903 -%}{{ section.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
            {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
            sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
            src="{{ section.settings.image_mobile | img_url: '1500x' }}"
            loading="lazy"
            alt="{{ section.settings.image_mobile.alt | escape }}"
            width="{{ section.settings.image_mobile.width }}"
            height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
            >
            {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
        </div>
      </div>
      <div class="text-bottom">
        <div class="page-width">
          {%- for block in section.blocks -%}
            <div class="feature-text" {{ block.shopify_attributes }}>
              <div class="feature">
                <div class="slide">
                  {%- if block.settings.html_1 != blank -%}
                  {{ block.settings.html_1 }}
                  <div class="text"> {{ block.settings.text_1 }}</div>
                  {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_2 != blank -%}
                  {{ block.settings.html_2 }}
                  <div class="text"> {{ block.settings.text_2 }}</div>
                {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_3 != blank -%}
                  {{ block.settings.html_3 }}
                  <div class="text"> {{ block.settings.text_3 }}</div>
                {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_4 != blank -%}
                  {{ block.settings.html_4 }}
                  <div class="text"> {{ block.settings.text_4 }}</div>
                {%- endif -%}
                </div>
              </div>
            </div>
            {%- endfor -%}
        </div>  
      </div>
   </div>
</div>

{% schema %}
  {
    "name": "Tenways Agot Banner",
    "tag": "section",
    "class": "banner-text spaced-section--full-width tenways-agot-banner-text",
    "settings": [
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "html",
        "id": "html",
        "label": "Icon"
      },
      {
        "type": "text",
        "id": "text",
        "label": "text"
      },
      {
        "type": "text",
        "id": "text2",
        "label": "text2"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "t:sections.image-with-text.settings.image.label"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image mobile"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "t:sections.image-with-text.settings.height.options__1.label"
          },
          {
            "value": "small",
            "label": "t:sections.image-with-text.settings.height.options__2.label"
          },
          {
            "value": "large",
            "label": "t:sections.image-with-text.settings.height.options__3.label"
          }
        ],
        "default": "adapt",
        "label": "t:sections.image-with-text.settings.height.label"
      }
    ],
    "blocks": [
      {
    "type": "feature",
    "name": "feature",
    "limit": 1,
    "settings": [
    {
      "type": "html",
      "id": "html_1",
      "label": "html_1"
    },
    {
      "type": "text",
      "id": "text_1",
      "label": "text 1"
    },
    {
      "type": "html",
      "id": "html_2",
      "label": "html_2"
    },
    {
      "type": "text",
      "id": "text_2",
      "label": "text 2"
    },
    {
      "type": "html",
      "id": "html_3",
      "label": "html_3"
    },
    {
      "type": "text",
      "id": "text_3",
      "label": "text 3"
    },
    {
      "type": "html",
      "id": "html_4",
      "label": "html_4"
    },
    {
      "type": "text",
      "id": "text_4",
      "label": "text 4"
    }
    ]
  }
    ],
    "presets": [
      {
          "name": "Tenways Agot Banner"
      }
    ]
  }
{% endschema %}